import React, {
  useRef,
  useState,
  type ReactElement,
} from 'react'
import { RiFlagFill, RiFlagLine } from '@remixicon/react'
import Checkbox, { type CheckboxRef } from '@/library/gallery/components/CheckBox'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Space } from '@/library/gallery/components/Space'
import List from '@/library/gallery/components/List'

const DemoIndeterminate = () => {
  const items = ['Apple', 'Orange', 'Banana']
  const [value, setValue] = useState(['Apple'])

  return (
    <Space direction="vertical">
      <Checkbox
        shape="circle"
        indeterminate={value.length > 0 && value.length < items.length}
        checked={value.length === items.length}
        onChange={(v) => {
          if (v) {
            setValue([...items])
          } else {
            setValue([])
          }
        }}
      >
        半选
      </Checkbox>
      <Checkbox.Group
        value={value}
        onChange={(v) => {
          setValue(v as string[])
        }}
      >
        <Space>
          {items.map((item) => (
            <Checkbox
              key={item}
              value={item}
            >
              {item}
            </Checkbox>
          ))}
        </Space>
      </Checkbox.Group>
    </Space>
  )
}

const DemoWithList = () => {
  const items = ['Apple', 'Orange', 'Banana']
  const [values, setValues] = useState([...items])
  return (
    <Checkbox.Group
      value={values}
      onChange={(e) => {
        setValues(e as string[])
      }}
    >
      <List>
        {items.map((item) => (
          <List.Item
            key={item}
            prefix={(
              <div onClick={(e) => e.stopPropagation()}>
                <Checkbox shape="circle" value={item} />
              </div>
            )}
            onClick={() => {
              if (values.includes(item)) {
                setValues((prev) => prev.filter((v) => v !== item))
              } else {
                setValues((prev) => [...prev, item])
              }
            }}
            arrow={false}
          >
            {item}
          </List.Item>
        ))}
      </List>
    </Checkbox.Group>
  )
}

export default (): ReactElement => {
  const [checked, setChecked] = useState(true)
  const refCheckbox = useRef<CheckboxRef>(null)

  React.useEffect(() => {
    setTimeout(() => {
      if (refCheckbox.current) {
        refCheckbox.current.uncheck()
      }
    }, 1000)
  }, [])

  return (
    <>
      <DemoBlock title="复选框(半选)">
        <Checkbox indeterminate>复选框(半选)</Checkbox>
      </DemoBlock>

      <DemoBlock title="shape">
        <Checkbox shape="circle">shape=circle</Checkbox>
      </DemoBlock>

      <DemoBlock title="默认选中">
        <Checkbox
          defaultChecked
        >
          默认选中
        </Checkbox>
      </DemoBlock>

      <DemoBlock title="受控模式">
        <Checkbox
          checked={checked}
          onClick={() => console.info('事件触发')}
          onChange={(v) => setChecked(v)}
        >
          受控模式
        </Checkbox>
      </DemoBlock>

      <DemoBlock title="禁用状态">
        <Space direction="vertical">
          <Checkbox
            defaultChecked
            disabled
          >
            禁用状态
          </Checkbox>
          <Checkbox disabled>
            禁用状态
          </Checkbox>
        </Space>
      </DemoBlock>

      <DemoBlock title="ref">
        <Checkbox
          defaultChecked
          ref={refCheckbox}
        >
          ref使用(不推荐)
        </Checkbox>
      </DemoBlock>

      <DemoBlock title="自定义图标">
        <Checkbox
          style={{ '--icon-size': '12px', transform: 'scale(0.8)' }}
          icon={(c) => (c ? (
            <RiFlagFill />
          ) : (
            <RiFlagLine />
          ))}
        >
          自定义图标
        </Checkbox>
      </DemoBlock>

      <DemoBlock title="占满整行宽度">
        <Space direction="vertical" block>
          <Checkbox block>块级元素</Checkbox>
          <Checkbox>非块级元素</Checkbox>
        </Space>
      </DemoBlock>

      <DemoBlock title="自定义大小">
        <Checkbox
          style={{
            '--icon-size': '12px',
            '--font-size': '6px',
            '--gap': '3px',
          }}
        >
          小号的复选框
        </Checkbox>
      </DemoBlock>

      <DemoBlock title="复选框组禁用">
        <Checkbox.Group defaultValue={['orange', 'banana']} disabled>
          <Space>
            <Checkbox shape="circle" value="apple" disabled={false}>苹果</Checkbox>
            <Checkbox shape="circle" value="orange">橘子</Checkbox>
            <Checkbox shape="circle" value="banana">香蕉</Checkbox>
          </Space>
        </Checkbox.Group>
      </DemoBlock>

      <DemoBlock title="全选和半选">
        <DemoIndeterminate />
      </DemoBlock>

      <DemoBlock title="配合List使用" padding="0">
        <DemoWithList />
      </DemoBlock>
    </>
  )
}
